<template>
    <div>
        <up-checkbox-group v-model="checkboxValue1" @change="checkboxChange">

            <view class="noData" v-if="allocatedList.length == 0">
                <image src="/static/imgs/myClue/noData.png" mode="" style="max-height: 100%;max-width: 100%;"></image>
            </view>
            <div class="Unallocated" v-for="item in allocatedList" v-if="allocatedList.length > 0">

                <up-checkbox activeColor="#ff6a00" shape="circle" :name="item.orderId" v-show="isDelete"></up-checkbox>
                <div class="content" @tap.stop="toOrderEdit(item)" v-show="!isDelete">
                    <div class="content_top">
                        <div class="product_name">产品名称：{{ item.productName }}</div>
                        <div class="product_person">成交人：{{ item.addPeople }}</div>
                    </div>
                    <div class="content_bottom">
                        <div class="text" v-show="item.amount">成交金额：<span style="color:#ff6a00">{{ item.amount }}</span>
                        </div>
                        <div class="text" v-show="item.achievement">订单业绩：<span style="color:#ff6a00">{{ item.achievement
                        }}</span> </div>
                        <div class="text" v-show="item.name">姓名：<span>{{ item.name }}</span> </div>
                        <div class="text" style="white-space: nowrap;" v-show="item.phoneFirst">
                            联系方式1:<span>{{ item.phoneFirst }}</span> </div>
                        <div class="text">数量：<span>1</span> </div>
                        <div class="text">是否退费：<span :style="{ color: item.isReturns == '1' ? 'red' : '#666' }">{{
                            item.isReturns == '1' ? '是' : '否' }}</span> </div>

                        <div class="text" v-show="item.isReturns == '1'">退费金额：<span style="color: red;">{{
                            item.retAmount }}</span> </div>
                        <div class="text" v-show="item.isReturns == '1'">退还业绩：<span style="color:red">{{
                            item.retAchievement
                                }}</span> </div>
                        <div v-for="item1, index1 in item.data" style="width: 100%;display: flex;">
                            <div class="text" style="white-space: nowrap;">分配员工{{ index1 + 1 }}：<span>{{ item1.name
                            }}</span> </div>
                            <div class="text" style="white-space: nowrap;">分配业绩{{ index1 + 1 }}：<span>{{
                                item1.achievement
                                    }}</span> </div>
                        </div>
                        <div class="text" v-show="item.dealTime">成交时间：<span>{{ item.dealTime }}</span> </div>
                        <div class="text" style="width: 100%;">订单编号：<span>{{ item.orderNumber }}</span> </div>

                    </div>
                    <div class="icon_box" v-show="!isDelete">
                        <image src="../../../static/images/antFill-edit 1@1x.png" alt="" style="margin-right: 10rpx;width: 24px;
height: 24px;" @tap="toOrderEdit(item)" />
                        <image src="../../../static/images/iconPark-change 1@1x.png" alt=""
                            @tap.stop="openAssignmentModal(item)" style="z-index: 99;width: 24px;
height: 24px;" />
                    </div>


                </div>

                <div class="content" v-show="isDelete">
                    <div class="content_top">
                        <div class="product_name">产品名称：{{ item.productName }}</div>
                        <div class="product_person">成交人：{{ item.addPeople }}</div>
                    </div>
                    <div class="content_bottom">
                        <div class="text" v-show="item.amount">成交金额：<span style="color:#ff6a00">{{ item.amount }}</span>
                        </div>
                        <div class="text" v-show="item.achievement">订单业绩：<span style="color:#ff6a00">{{ item.achievement
                        }}</span> </div>
                        <div class="text" v-show="item.name">姓名：<span>{{ item.name }}</span> </div>
                        <div class="text" style="white-space: nowrap;" v-show="item.phoneFirst">
                            联系方式1:<span>{{ item.phoneFirst }}</span> </div>
                        <div class="text">数量：<span>1</span> </div>
                        <div class="text">是否退费：<span :style="{ color: item.isReturns == '1' ? 'red' : '#666' }">{{
                            item.isReturns == '1' ? '是' : '否' }}</span> </div>

                        <div class="text" v-show="item.isReturns == '1'">退费金额：<span style="color: red;">{{
                            item.retAmount }}</span> </div>
                        <div class="text" v-show="item.isReturns == '1'">退还业绩：<span style="color:red">{{
                            item.retAchievement
                                }}</span> </div>
                        <div v-for="item1, index1 in item.data" style="width: 100%;display: flex;">
                            <div class="text" style="white-space: nowrap;">分配员工{{ index1 + 1 }}：<span>{{ item1.name
                            }}</span> </div>
                            <div class="text" style="white-space: nowrap;">分配业绩{{ index1 + 1 }}：<span>{{
                                item1.achievement
                                    }}</span> </div>
                        </div>
                        <div class="text" v-show="item.dealTime">成交时间：<span>{{ item.dealTime }}</span> </div>
                        <div class="text" style="width: 100%;">订单编号：<span>{{ item.orderNumber }}</span> </div>

                    </div>
                    <div class="icon_box" v-show="!isDelete">
                        <image src="../../../static/images/antFill-edit 1@1x.png" alt="" style="margin-right: 10rpx;width: 24px;
height: 24px;" @tap="toOrderEdit(item)" />
                        <image src="../../../static/images/iconPark-change 1@1x.png" alt=""
                            @tap.stop="openAssignmentModal(item)" style="z-index: 99;width: 24px;
height: 24px;" />
                    </div>


                </div>
            </div>


        </up-checkbox-group>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const props = defineProps({
    allocatedList: {
        type: Array,
        default: () => []
    }
})
const toOrderEdit = (item) => {
    // console.log(item)
    uni.setStorageSync('userObject', JSON.stringify(item))
    uni.navigateTo({
        url: '/pages/OrderEdit/OrderEdit'
    })
}
import emitter from '../../../utils/eventBus';
const checkboxValue1 = ref([]);
const openAssignmentModal = (item) => {
    emitter.emit('openModal', item)
}

const checkboxChange = (e) => {
    console.log(e, 'e')
    checkboxValue1.value = e
    emitter.emit('checkboxChange', checkboxValue1.value)

}
emitter.on('clearCheck', () => {
    console.log(123456)
    checkboxValue1.value = []


})
const isDelete = ref(false)

emitter.on('openDelete', () => {

    isDelete.value = true;

})
emitter.on('closeDelete', () => {
    isDelete.value = false;
    console.log(!isDelete.value)
})
</script>

<style lang="scss">
.Unallocated {
    width: 100%;
    border-bottom: 1px solid rgba(239, 239, 239, 1);
    background-color: #fff;
    padding-left: 42rpx;
    display: flex;
    position: relative;

    // align-items: center;
    .u-checkbox {
        display: block;
        padding-top: 20rpx;
    }

    .content {
        flex: 1;
        padding: 20rpx;

        .content_top {
            display: flex;
            justify-content: space-between;

            .product_name {
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                text-align: left;
                font-family: PingFangSC-medium;
            }

            .product_person {
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                text-align: left;
                font-family: PingFangSC-regular;
            }

        }

        .content_bottom {
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 40rpx;

            .text {
                width: 50%;
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                text-align: left;
                font-family: PingFangSC-light;
            }
        }

    }

    .icon_box {
        position: absolute;
        right: 20rpx;
        bottom: 0
    }

}

.noData {
    width: 444rpx;
    height: 444rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>